<template>
    <v-container>
        <v-layout row wrap justify-center id="wrapper">
            <v-flex xs12 class="text-xs-center">
                <section class="todoapp">
                    <header class="header">
                        <h1>todos</h1>
                        <input class="new-todo" placeholder="接下来要做什么?" autofocus=""
                               v-model="newTodo"
                               @keyup.enter="addTodo"
                        />
                    </header>
                    <section class="main"
                             v-show="showTodos"
                    >
                        <input class="toggle-all" id="toggle-all" type="checkbox"
                               v-model="allDone"
                        />
                        <label for="toggle-all">一键全部完成</label>
                        <ul class="todo-list">
                            <li
                                    v-for="(todo, index) in filteredTodos"
                                    :key="'todo-' + index"
                                    :class="{ completed: todo.completed, editing: todo === editedTodo}"
                            >
                                <div class="view">
                                    <input class="toggle" type="checkbox"
                                           v-model="todo.completed"
                                    />
                                    <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                                    <button class="destroy"
                                            @click="removeTodo(todo)"
                                    ></button>
                                </div>
                                <input class="edit"
                                       v-model="todo.title"
                                       v-focus="todo === editedTodo"
                                       @keyup.enter="doneEdit(todo)"
                                       @keyup.esc="cancelEdit(todo)"
                                       @blur="cancelEdit(todo)"
                                />
                            </li>
                        </ul>
                    </section>
                    <footer class="footer"
                            v-show="showTodos"
                    >
                        <span class="todo-count"><strong>{{ activeCount }}</strong> 项未完成</span>
                        <ul class="filters">
                            <li><a href="#/"
                                   :class="{ selected: visibility === 'all' }"
                                   @click="visibility='all'"
                            >全部</a></li>
                            <li><a href="#/active"
                                   :class="{ selected: visibility === 'active' }"
                                   @click="visibility='active'"
                            >未完成</a></li>
                            <li><a href="#/completed"
                                   :class="{ selected: visibility === 'completed' }"
                                   @click="visibility='completed'"
                            >已完成</a></li>
                        </ul>
                        <button class="clear-completed"
                                @click="removeCompleted"
                                v-show="completedCount"
                        >清空已完成
                        </button>
                    </footer>
                </section>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script type="text/ecmascript-6">
    var STORAGE_KEY = 'todos'
    var todoStorage = {
        fetch() {
            try {
                return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
            } catch (err) {
                return []
            }
        },
        save(todos) {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
        }
    }

    var filters = {
        all: todos => todos,
        active: todos => todos.filter(todo => !todo.completed),
        completed: todos => todos.filter(todo => todo.completed)
    }
    var visibility = location.hash.substr(location.hash.indexOf('/') + 1)
    visibility = visibility === '' ? 'all' : visibility

    export default {
        data: () => ({
            newTodo: '',
            todos: todoStorage.fetch(),
            editedTodo: null,
            beforeEditCache: '',
            visibility
        }),
        created() {

        },
        mounted() {
        },
        // watch todos change for localStorage persistence
        watch: {
            todos: {
                deep: true,
                handler: todoStorage.save
                // 判断当前应显示的内容
            }
        },

        // computed properties
        // http://vuejs.org/guide/computed.html
        computed: {
            // 显示任务总数量
            showTodos() {
                return this.todos.length > 0
            },
            // 未完成
            activeCount() {
                return filters.active(this.todos).length
            },
            // 已完成
            completedCount() {
                return filters.completed(this.todos).length
            },
            // 判断所有任务
            allDone: {
                get() {
                    return this.activeCount === 0
                },
                set(value) {
                    this.todos.map(todo => {
                        todo.completed = value
                    })
                }
            },
            // 判断
            filteredTodos() {
                return filters[this.visibility](this.todos)
            }
        },

        // methods that implement data logic.
        // note there's no DOM manipulation here at all.
        methods: {
            addTodo() {
                this.newTodo = this.newTodo.trim()
                if (!this.newTodo) {
                    return
                }
                this.todos.unshift({
                    title: this.newTodo,
                    completed: false
                })
                this.newTodo = ''
            },
            removeTodo(todo) {
                var index = this.todos.indexOf(todo)
                this.todos.splice(index, 1)
            },
            editTodo(todo) {
                this.editedTodo = todo
                this.beforeEditCache = todo.title
            },
            doneEdit(todo) {
                if (!this.editedTodo) {
                    return
                }
                this.editedTodo = null
                todo.title = todo.title.trim()
                if (!todo.title) {
                    this.removeTodo(todo)
                }
            },
            cancelEdit(todo) {
                if (this.editedTodo) {
                    todo.title = this.beforeEditCache
                    this.editedTodo = null
                }
            },
            removeCompleted() {
                this.todos = filters.active(this.todos)
            }
        },

        // a custom directive to wait for the DOM to be updated
        // before focusing on the input field.
        // http://vuejs.org/guide/custom-directive.html
        directives: {
            focus: {
                update(el) {
                    el.focus()
                }
            }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    #wrapper {
        :focus {
            outline: 0;
        }

        .hidden {
            display: none;
        }

        .todoapp {
            background: #fff;
            margin: 130px 0 40px 0;
            position: relative;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
                    0 25px 50px 0 rgba(0, 0, 0, 0.1);
        }

        .todoapp input::-webkit-input-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        .todoapp input::-moz-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        .todoapp input::input-placeholder {
            font-style: italic;
            font-weight: 300;
            color: #e6e6e6;
        }

        .todoapp h1 {
            position: absolute;
            top: -155px;
            width: 100%;
            font-size: 100px;
            font-weight: 100;
            text-align: center;
            color: rgba(175, 47, 47, 0.15);
            -webkit-text-rendering: optimizeLegibility;
            -moz-text-rendering: optimizeLegibility;
            text-rendering: optimizeLegibility;
        }

        .new-todo,
        .edit {
            position: relative;
            margin: 0;
            width: 100%;
            font-size: 24px;
            font-family: inherit;
            font-weight: inherit;
            line-height: 1.4em;
            border: 0;
            color: inherit;
            padding: 6px;
            border: 1px solid #999;
            box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .new-todo {
            padding: 16px 16px 16px 60px;
            border: none;
            background: rgba(0, 0, 0, 0.003);
            box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
        }

        .main {
            position: relative;
            z-index: 2;
            border-top: 1px solid #e6e6e6;
        }

        .toggle-all {
            text-align: center;
            border: none; /* Mobile Safari */
            opacity: 0;
            position: absolute;
        }

        .toggle-all + label {
            width: 60px;
            height: 34px;
            font-size: 0;
            position: absolute;
            top: -52px;
            left: -13px;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .toggle-all + label:before {
            content: '❯';
            font-size: 22px;
            color: #e6e6e6;
            padding: 10px 27px 10px 27px;
        }

        .toggle-all:checked + label:before {
            color: #737373;
        }

        .todo-list {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .todo-list li {
            position: relative;
            font-size: 24px;
            border-bottom: 1px solid #ededed;
        }

        .todo-list li:last-child {
            border-bottom: none;
        }

        .todo-list li.editing {
            border-bottom: none;
            padding: 0;
        }

        .todo-list li.editing .edit {
            display: block;
            width: 506px;
            padding: 12px 16px;
            margin: 0 0 0 43px;
        }

        .todo-list li.editing .view {
            display: none;
        }

        .todo-list li .toggle {
            display: block;
            text-align: center;
            width: 40px;
            /* auto, since non-WebKit browsers doesn't support input styling */
            height: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto 0;
            border: none; /* Mobile Safari */
            -webkit-appearance: none;
            appearance: none;
        }

        .todo-list li .toggle {
            opacity: 0;
        }

        .todo-list li .toggle + label {
            /*
                Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
                IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
            */
            background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
            background-repeat: no-repeat;
            background-position: center left;
        }

        .todo-list li .toggle:checked + label {
            background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
        }

        .todo-list li label {
            word-break: break-all;
            padding: 15px 15px 15px 60px;
            display: block;
            line-height: 1.2;
            transition: color 0.4s;
        }

        .todo-list li.completed label {
            color: #d9d9d9;
            text-decoration: line-through;
        }

        .todo-list li .destroy {
            display: none;
            position: absolute;
            top: 0;
            right: 10px;
            bottom: 0;
            width: 40px;
            height: 40px;
            margin: auto 0;
            font-size: 30px;
            color: #cc9a9a;
            margin-bottom: 11px;
            transition: color 0.2s ease-out;
        }

        .todo-list li .destroy:hover {
            color: #af5b5e;
        }

        .todo-list li .destroy:after {
            content: '×';
        }

        .todo-list li:hover .destroy {
            display: block;
        }

        .todo-list li .edit {
            display: none;
        }

        .todo-list li.editing:last-child {
            margin-bottom: -1px;
        }

        .footer {
            justify-content: space-between;
            color: #777;
            padding: 10px 15px;
            height: 20px;
            text-align: center;
            border-top: 1px solid #e6e6e6;
        }

        .footer:before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 50px;
            overflow: hidden;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
                    0 8px 0 -3px #f6f6f6,
                    0 9px 1px -3px rgba(0, 0, 0, 0.2),
                    0 16px 0 -6px #f6f6f6,
                    0 17px 2px -6px rgba(0, 0, 0, 0.2);
        }

        .todo-count {
            float: left;
            text-align: left;
        }

        .todo-count strong {
            font-weight: 300;
        }

        .filters {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            right: 0;
            left: 0;
        }

        .filters li {
            display: inline;
        }

        .filters li a {
            color: inherit;
            margin: 3px;
            padding: 3px 7px;
            text-decoration: none;
            border: 1px solid transparent;
            border-radius: 3px;
        }

        .filters li a:hover {
            border-color: rgba(175, 47, 47, 0.1);
        }

        .filters li a.selected {
            border-color: rgba(175, 47, 47, 0.2);
        }

        .clear-completed,
        html .clear-completed:active {
            float: right;
            position: relative;
            line-height: 20px;
            text-decoration: none;
            cursor: pointer;
        }

        .clear-completed:hover {
            text-decoration: underline;
        }

        .info {
            margin: 65px auto 0;
            color: #bfbfbf;
            font-size: 10px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            text-align: center;
        }

        .info p {
            line-height: 1;
        }

        .info a {
            color: inherit;
            text-decoration: none;
            font-weight: 400;
        }

        .info a:hover {
            text-decoration: underline;
        }

        /*
            Hack to remove background from Mobile Safari.
            Can't use it globally since it destroys checkboxes in Firefox
        */
        @media screen and (-webkit-min-device-pixel-ratio: 0) {
            .toggle-all,
            .todo-list li .toggle {
                background: none;
            }

            .todo-list li .toggle {
                height: 40px;
            }
        }

        @media (max-width: 430px) {
            .footer {
                height: 50px;
            }

            .filters {
                bottom: 10px;
            }
        }
    }
</style>
